<template>
  <el-drawer v-model="drawer" @closed="closed">
    <!-- 标题部分 -->
    <template #header>
      <h4>新增</h4>
    </template>
    <template #default>
      <el-form
        ref="form"
        :model="formParams"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input placeholder="菜单名称" v-model="formParams.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-select v-model="formParams.type">
            <el-option
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-tree-select
            v-model="formParams.parentId"
            :data="parentList"
            :props="{ label: 'name' }"
            :render-after-expand="false"
            check-strictly
            check-on-click-node
            auto-expand-parent
            @current-change="treeSelect($event)"
          />
        </el-form-item>
        <el-form-item label="路由url" prop="path">
          <el-input placeholder="路由url" v-model="formParams.path" @input="update"></el-input>
        </el-form-item>
        <el-form-item label="路由文件url" prop="url">
          <el-input
            placeholder="路由文件url"
            v-model="formParams.url"
            readonly
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="图标">
                    <el-input placeholder="图标" v-model="formParams.icon"></el-input>
                </el-form-item> -->
        <el-form-item label="描述">
          <el-input
            type="textarea"
            placeholder="描述"
            v-model="formParams.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input placeholder="排序" v-model="formParams.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            size="default"
            @click="save"
          >
            保存
          </el-button>
          <el-button type="primary" size="default" @click="drawer = false">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { permissionAdd, permissionEdit } from '@/api/system/permission'
import { ElMessage } from 'element-plus'
import { typeArr } from './type'

let props = defineProps(['list']) //数组|对象写法都可以

const defaultForm = {
  permissionId: '',
  name: '', // 菜单名称
  type: '', // 菜单类型
  parentId: '', // 上级菜单
  path: '', // 路由url
  url: '', // 路由文件url
  icon: '', // 图标
  description: '', // 描述
  sort: '', // 排序
}

let formParams = reactive<any>({
  ...defaultForm,
})
const rules = {
  name: [{ required: true, message: '请输入', trigger: 'blur' }],
  // parentId: [{ required: true, message: '请输入', trigger: 'blur' }],
  path: [{ required: true, message: '请输入', trigger: 'blur' }],
  type: [
    { required: true, type: 'number', message: '请输入', trigger: 'blur' },
  ],
  url: [{ required: true, message: '请输入', trigger: 'blur' }],
}

let drawer = ref(false)
let edit = ref(false)

let parentList = []
let hasResolve = false
const resolveList = (list) => {
  return list.map((v) => {
    v.value = v.permissionId
    if (v.children && v.children.length) {
      v.children = resolveList(v.children)
    }
    return v
  })
}
const show = (row) => {
  if (!hasResolve) {
    parentList = resolveList(props.list)
    hasResolve = true
  }
  if (row) {
    edit.value = true

    Object.keys(formParams).forEach((key) => {
      formParams[key] = row[key]
    })
    if (!formParams.parentId) {
      formParams.parentId = ''
    }
  } else {
    edit.value = false
  }
  drawer.value = true
}

let loading = ref(false)
let form = ref()
//保存按钮的方法
const save = async () => {
  await form.value.validate()
  loading.value = true
  let result: any
  if (edit.value) {
    result = await permissionEdit(formParams)
  } else {
    result = await permissionAdd(formParams)
  }
  loading.value = false
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    drawer.value = false
    $emit('callback')
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}

const closed = () => {
  Object.assign(formParams, defaultForm)
}

const update = (e) => {
  formParams.url = e
}

const treeSelect = (e) => {
  // formParams.parentId = e.permissionId
  // console.log(formParams.parentId);
}

//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
  show,
})
//自定义事件的方法
let $emit = defineEmits(['callback'])
</script>
